import React, { Component } from 'react'
import CommentsStyle from "./comments.module.css"
// import Data from "../../data/data.json"
// let { ratings } = Data
import store from '../../store'
export default class Comments extends Component {
    state = {
        ratings: [],
        oldratings: [],
    }
    componentDidMount() {
        this.setState({ ratings: store.getState().data.ratings, oldratings: store.getState().data.ratings })
    }

    render() {
        return (
            <div className={CommentsStyle.cotainer}>
                <div className={CommentsStyle.CommentsTitle}>
                    <div className={CommentsStyle.CommentsTitle_left}>
                        <span className={CommentsStyle.score}>3.9</span>
                        <span className={CommentsStyle.scoreHead}>综合评分</span>
                        <span className={CommentsStyle.scoreView} >高于周边商家69.2%</span></div>
                    <div className={CommentsStyle.CommentsTitle_right}>
                        <div>服务态度 <span><img src={require("../../img/star36_on@2x.png")} alt="" />
                            <img src={require("../../img/star36_on@2x.png")} alt="" />
                            <img src={require("../../img/star36_on@2x.png")} alt="" />
                            <img src={require("../../img/star36_on@2x.png")} alt="" />
                            <img src={require("../../img/star36_off@2x.png")} alt="" /><span
                                className={CommentsStyle.score}>3.9</span> </span></div>
                        <div>服务态度 <span> <img src={require("../../img/star36_on@2x.png")} alt="" />
                            <img src={require("../../img/star36_on@2x.png")} alt="" />
                            <img src={require("../../img/star36_on@2x.png")} alt="" />
                            <img src={require("../../img/star36_on@2x.png")} alt="" />
                            <img src={require("../../img/star36_off@2x.png")} alt="" /><span
                                className={CommentsStyle.score}>4.0</span> </span></div>
                        <div>送达时间 <span className={CommentsStyle.time} > 44分钟</span></div>
                    </div>

                </div>
                <div className={CommentsStyle.Content}>

                    <button onClick={this.all}>全部</button>
                    <button onClick={this.agree}>满意</button>
                    <button onClick={this.unagree}>不满意</button>
                </div>
                <div className={CommentsStyle.Content_tail}>
                    <button></button> 只看有用的评价
                </div>
                {
                    this.state.ratings.map((item, key) => {

                        return <div className={CommentsStyle.Pcomments} key={key}>
                            <div className={CommentsStyle.Pcomments_1}><img src={item.avatar} alt="" /></div>
                            <div className={CommentsStyle.Pcomments_2}>
                                <div style={{ margin: ".16rem", fontSize: ".2667rem", color: "rgb(7,17,27)", lineHeight: ".32rem" }}>{item.username}
                                    <span style={{ fontSize: ".2667rem", fontWeight: "200", color: "rgb(147,153,159)", lineHeight: ".32rem" }}>{item.rateTime}</span>
                                </div>
                                <div style={{ margin: ".16rem", height: ".5rem", display: "flex" }} >{this.star(item.score)}
                                    <span style={{ margin: ".16rem", fontSize: ".2667rem", fontWeight: "200", color: "rgb(147,153,159)", lineHeight: ".32rem" }}>{item.deliveryTime ? item.deliveryTime + "分钟送达" : ""}</span>
                                </div>
                                <div style={{ fontSize: ".32rem", color: "rgb(7,17,27)", lineHeight: ".48rem" }}>
                                    {item.text}
                                </div>
                                <div className={CommentsStyle.zan}>
                                    <div>👍</div>
                                    {
                                        item.recommend.map((item1, k) => {
                                            return <div key={k}>{item1}</div>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                    })
                }

            </div>
        )
    }
    agree = () => {
        this.setState({
            ratings: this.state.oldratings.filter((item) => item.score === 5)
        })
    }
    all = () => {
        this.setState({
            ratings: this.state.oldratings
        })
    }
    unagree = () => {
        this.setState({
            ratings: this.state.oldratings.filter((item) => item.score === 0)
        })
    }
    star = (num) => {
        let on = <img src={require("../../img/star36_on@2x.png")} alt="" />
        let off = <img src={require("../../img/star36_off@2x.png")} alt="" />
        let count = num
        var i = 0

        var arr = [];
        for (; i < num; i++) {
            arr.push(on);
            //    console.log(arr);

        }
        while (count < 5) {
            arr.push(off);

            // console.log(arr);
            count++;
        }
        return arr


    }
}
